import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { InputItem, List, Tools, Checkbox, Icon } from "weaver-mobile";
const getLabel = Tools.getLabel;
const CheckboxItem = Checkbox.CheckboxItem;
const FormItem = List.FormItem;

@observer
export default class Qa extends Component {
    render() {
        const { store: { qa, checkAll, checkStatus, handleCk, isCheckAll, handleQaChange } } = this.props;

        const formItemCommonProps = {
            label: "",
            wrap: "nowrap",
            extra: <Icon type="editor" size="xxs"/>
        };

        return (
            <div className="qas">
        		<Checkbox onChange={checkAll} checked={isCheckAll}>
        			<span className="checkAll">{getLabel(556, '全选')}</span>
        		</Checkbox>
        		{ qa.map( (data,index) => {
					return (
						<div className="qa" key={index}>
							<Checkbox checked={checkStatus[index]} onChange={() => handleCk(index)}><span className="serial">{`${getLabel(15486, '序号')}: ${index + 1}`}</span></Checkbox>
							<List>
								<FormItem 
									key={`q${index}`}
									{...formItemCommonProps }
									required={!data.q ? true : false}
									content={(<InputItem placeholder={getLabel('522179','请输入') } value={data.q} onChange={v => handleQaChange(v, index, "q")}>{getLabel('522641',"问题 ")}</InputItem>)}
								/>
								<FormItem 
									key={`a${index}`}
									{...formItemCommonProps}
									required={!data.a ? true : false}
									content={(<InputItem placeholder={getLabel('522179','请输入') } value={data.a} onChange={v => handleQaChange(v, index, "a")}>{getLabel('24122',"答案")}</InputItem>)}
								/>
							</List>
						</div>
					)
				}) }
        	</div>
        );
    }
}